<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			/*background: red url() 0 0 no-repeat;*/
			position: absolute;
			left: 500px;
			border: 1px solid #000;
			/*display: none;*/
		}
		.son{
			width: 1000px;
			height: 200px;
			background: blue url() 0 0 no-repeat;
			position: relative;
			left: 0px;
		}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {
			
			$('.btn').click(function(event) {

				// $('.box').toggle(1000);
				
				// $('.box').slideUp(1000);
				// 
				// $('.box').slideToggle(1000);
				// 
				// $('.box').fadeToggle(1000);
				// $('.box').animate({'width':"400px"}, 500);

				// $('.box').show(1000);
				// $('.box').hide(1000);
				// $(this).animate({left: "900px"}, 500);
			});




			// $('.box').hover(function() {
			// 	$(this).animate({'width':"400px"}, 500);
			// }, function() {
			// 	$(this).animate({'width':"200px"}, 500);
			// });
			$('.btn1').click(function(event) {
				$('.son').animate({left:'-500px'}, 1000);
			});

			$('.btn2').click(function(event) {
				$('.son').animate({left:'0px'}, 1000);
			});


		})
	</script>
</head>
<body>
	<button class="btn1">点我</button>
	<button class="btn2">点我</button>
	<div class="box">
		<div class="son"></div>
	</div>
</body>
</html>